import React, { useEffect,useState,useMemo,useCallback} from 'react';
import { Button} from 'antd';
import { Link , Outlet} from "react-router-dom";

let prev

const Dom4 = function () {

    const [x , setX] = useState(0)
    const [y , setY] = useState(0)
    const [z , setZ] = useState(0)


const handle = useCallback(() => {

}, [x])
    if(!prev){
        prev = handle
    }else{
        console.log(prev === handle)
    }


const fn = useMemo(() => {
    // console.log(111)
    return x+y
},[x,y])


 // 自定义hook
useEffect(()=>{
    document.title = '111'
})


    const useComputed = (val) => {
        const [state , setState] = useState(val)
        const setComputed = (arr) => {
            setState({
                ...state,
                ...arr
            })
        }
        return [state , setComputed]
    }

    const [state , setComputed] = useComputed({
        one:0,
        two:1
    })
    const add = (type) => {
        if(type==='one'){
            setComputed({
                one:state.one+1
            })
            return
        }
        setComputed({
        two:state.two+1
    })
}



    return <>
    <div>{x}</div>
    <div>{y}</div>
        <div>{fn}</div>
    <div>{z}</div>
        <div><Button onClick={() => {setX(x+1)}}>X++</Button></div>
        <div><Button onClick={() => {setY(y+1)}}>Y++</Button></div>
        <div><Button onClick={() => {setZ(z+1)}}>z++</Button></div>

<hr/>
        <div>{state.one}</div>
        <div>{state.two}</div>
        <div>
            <Button onClick={add.bind(null,'one')}>按钮一</Button>
            <Button onClick={add.bind(null,'two')}>按钮二</Button>
        </div>

    <Outlet/>
    </>
}




export default Dom4



